{% extends 'myapp/home.html' %}
{% load static %}
{% block content %}
    <script type="text/javascript" src="{% static 'myapp/js/echarts/echarts.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'myapp/js/echarts/echarts-gl.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'myapp/js/echarts/echarts-stat/ecStat.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'myapp/js/extension/dataTool.min.js' %}"></script>
    <script type="text/javascript" src="{% static 'myapp/js/map/js/china.js' %}"></script>
    <script type="text/javascript" src="{% static 'myapp/js/map/js/world.js' %}"></script>
    <script type="text/javascript" src="https://api.map.baidu.com/api?v=2.0&ak="></script>
    <script type="text/javascript" src="{% static 'myapp/js/extension/bmap.min.js' %}"></script>
    <script src="{% static 'myapp/js/echarts/wordcloud/echarts-wordcloud.min.js' %}"></script>

    <div class="content">
        <div class="container-fluid">
            <div class="row">
                <!--详细页(地图)-->
                <div class="col-md-8">
                    <div class="card" id="container" style="width: 100%;height:810px; "></div>
                </div>

                <!--详细页右栏-->
                <div class="col-md-4">
                    <div class="card" id='right_top' style="height: 400px;width: 100%;padding: auto"></div>
                    <div class="card" id='right_bottom' style="height: 400px;width: 100%;padding: auto"></div>
                </div>

                <!--底边栏-->
            </div>
            <div class="row">
                <!--技术词云-->
                <div class="col-md-6">
                    <div class="card" id="wordcloud" style="height: 400px;width: 100%;padding: auto;margin-top: 10px;">

                    </div>
                </div>
                <!--Top5 职位数目排行-->
                <div class="col-md-6">
                    <div class="card" id="Top5job"
                         style="height: 400px;width: 100%;padding: auto;margin-top: 10px;"></div>
                </div>
            </div>
            <div class="row">
                <!--工作年限、薪资、技能要求、学历四个方面的关联-->
                <div class="col-md-6">
                    <div class="card" id="salary"
                         style="height: 600px;width: 100%;padding: auto;margin-top: 10px;"></div>
                </div>
                <div class="col-md-6">
                    <div class="card" id="salaryAndLevel"
                         style="height: 600px;width: 100%;padding: auto;margin-top: 10px;">
                    </div>
                </div>
            </div>
        </div>
    </div>
    <!--接收数据-->
    <script>
        var result_al ={{ right_top|safe }};
        var pie_data={{ right_bottom|safe }};
        var data ={{ map_data|safe }};
        var word_data={{ word_cloud_data|safe }};
        var salary_exp={{ salary_exp|safe }};
        var salary_edu={{ salary_level|safe }};
        var top5JobData={{ top5JobNum|safe }};
    </script>
    <!--引入echartsJS代码-->
    <script type="text/javascript" src="{% static 'myapp/js/showInPage/detail.js' %}"></script>
{% endblock %}